<!--
 * @Description:: 请补充填写
 * @Version: 1.0
 * @Author: 小白
 * @Date: 2022-04-14 14:26:46
 * @LastEditors: 小白
 * @LastEditTime: 2025-11-24 16:45:28
 * @FilePath: \tmsadmin\src\views\contract\pushContract\components\list.vue
-->

<template>
  <SearchForm @search="searchFun" :list="templateList" style="margin-bottom: 20px" />
  <el-card class="page_card" shadow="never">
    <template #header>
      <div class="card-header">
        <div class="left">
          签署合同
        </div>
        <div class="right">
          <!-- 返回上一页 -->

          <el-button circle @click="refreshFun">
            <i class="icon ion-refresh" :class="iconRefresh" />
          </el-button>
        </div>
      </div>
    </template>
    <div>
      <div id="imageWrapper" style="width: 800px;height: 100%; margin: 0 auto; position: relative;">
        <div v-html="html"></div>
        <div @click="openDialog" style="width: 100%;height: 100px;z-index: 1; background: rgba(0,0,0,0);position: absolute;top: 80px;left: 0"></div>
      </div>
      <div class="footer" style="text-align: center;">
        <!-- 分割线 -->
         <el-divider></el-divider>
         <!-- 保存按钮 -->
          <el-button type="primary" @click="submits">
          保存
        </el-button>

        <!-- 取消按钮 -->
         <el-button type="default" @click="cancel">
          取消
        </el-button>

        <!-- 保存按钮 -->
          <el-button type="warning" @click="yulan">
          预览
        </el-button>
      </div>
    </div>
     <el-dialog v-model="dialogVisible" title="选择司机信息" width="500px" :append-to-body="true" :before-close="handleClose">
        <!-- 选择司机 -->
         <el-select v-model="forms.staff" filterable>
          <el-option v-for="item in staffList" :key="item.id" :label="item.carOwner + '-' + item.vehicleNumber" :value="item.id"></el-option>
         </el-select>
         <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose()">取消</el-button>
        <el-button type="primary" @click="submit()">
          确 认
        </el-button>
      </span>
    </template>
     </el-dialog>
      <el-dialog v-model="dialogVisibles" title="预览合同" width="800px" :append-to-body="true" :before-close="handleClose">
        <iframe :src="htmlUrl" frameborder="0" style="width: 100%;height: 70vh"></iframe>
      </el-dialog>
  </el-card>
</template>
<script lang="ts" setup>
import { REQUEST } from '@/api/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import SearchForm from './search.vue'
import { onMounted, ref, watch } from 'vue'
import { store } from '@/store'
const queryForm = ref({})
const dialogVisibles = ref(false)
const htmlUrl = ref('')
const iconRefresh = ref('')
onMounted(() => {
  getStaffList()
  getData()
})
const dialogVisible = ref(false)
const title = ref('')
const html = ref('')
const templateList = ref([])
const content = ref('')
const textArr = ref([])
const imageUrl = ref('')
const getData = () => {
  // loading.value = true
  REQUEST.POST('TEMPLATEINFOLIST', {
    houseId: store.state.userInfo.houseId
  }).then((res: any) => {
    if (res.status === 200) {
      content.value = ''
      templateList.value = res.data
      content.value = templateList.value[0].template
      queryForm.value.templateId = templateList.value[0].id

      getForms(content.value)
    }
  })
}
const openDialog = () => {
  dialogVisible.value = true
}
const handleClose = () => {
  dialogVisible.value = false
  dialogVisibles.value = false
}
const refreshFun = () => {
  iconRefresh.value = 'iconRefresh'
  cancel()
  setTimeout(() => {
    iconRefresh.value = ''
  }, 1000)
}
const forms = ref({
  staff: '',


})
const hetongList = ref([])
const staffList = ref([])
const getStaffList = () => {
  REQUEST.POST('STAFFLIST', {
    houseId: store.state.userInfo.houseId,
    pageNumber: 1,
    pageSize: 9999
  }).then((res: any) => {
    staffList.value = res.data.records
  })
  REQUEST.POST('OFFICIALINFO', {
    id: store.state.userInfo.houseId
  }).then((res: any) => {
    if (res.status == 200) {
      imageUrl.value = res.data.officialSeal
    }
  })

}
const searchFun = (e: any) => {
  queryForm.value = e
  content.value = templateList.value.filter((item: any) => item.id === queryForm.value.templateId)[0].template
  getForms(content.value)
}
const getForms = (content: any) => {
  textArr.value = []
  REQUEST.POST('TEMPLATEINFO', {
      templateId: queryForm.value.templateId,
      houseId: store.state.userInfo.houseId,
      generatorNum: 1
    }).then((res: any) => {
    hetongList.value = res.data
    textArr.value = []
    let select = `<span id="staffs" style="font-size:14px;">请选择司机信息</span>`
    const postalAccount = `<span id="postalAccount" style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>`
    //开户行
    const accountName = `<span id="accountName" style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>`
    // 姓名
    const carOwner = `<span id="carOwner" style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>`
    //住址
    const address = `<span id="address" style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>`
    // 手机号
    const phone = `<span id="phone" style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>`
    //驾照
    const idNumber = `<span id="idNumber" style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>`
    //车牌号
    const vehicleNumber = `<span id="vehicleNumber" style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>`
    //车长
    const vehicleCommander = `<span id="vehicleCommander" style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>`

    // 出发地
    const address1 = `<input style="width: 100px;" id="address1" placeholder="请输入出发地"></input>`
    //到达地
    const address2 = `<input style="width: 100px;"  id="address2" placeholder="请输入到达地"></input>`
    //重量
    const weight = `<input style="width: 100px;" id="weight"  placeholder="请输入重量"></input>`
    //时间
    const hour = `<input style="width: 100px;" id="hour" placeholder="请输入"></input>`
    //价值
    const price = `<input style="width: 100px;" id="price" placeholder="请输入"></input>`
    //价值1
    const price1 = `<input style="width: 100px;"  id="price1" placeholder="请输入"></input>`
    //价值2
    const price2 = `<input style="width: 100px;"  id="price2" placeholder="请输入"></input>`
    //价值3
    const price3 = `<input style="width: 100px;"  id="price3" placeholder="请输入"></input>`
    //时间
    const year = `<input style="width: 50px;" id="year" placeholder="请输入"></input>`
    const mouth = `<input style="width: 50px;" id="mouth" placeholder="请输入"></input>`
    const day = `<input style="width: 50px;" id="day" placeholder="请输入"></input>`
    const hour1 = `<input style="width: 50px;" id="hour1" placeholder="请输入"></input>`



    //  备注
    const textarea = `<input style="width: 100px;"  id="textarea" placeholder="请输入备注"></input>`
    //
    let strs = ''
    strs = content.replaceAll('{{contractNo}}',res.data[0])
    strs = strs.replaceAll('{{staff}}', select)
    strs = strs.replaceAll('{{phone}}', phone)
    strs = strs.replaceAll('{{postalAccount}}', postalAccount)
    strs = strs.replaceAll('{{accountName}}', accountName)
    strs = strs.replaceAll('{{carOwner}}', carOwner)
    strs = strs.replaceAll('{{address}}', address)
    strs = strs.replaceAll('{{idNumber}}', idNumber)
    strs = strs.replaceAll('{{vehicleNumber}}', vehicleNumber)
    strs = strs.replaceAll('{{vehicleCommander}}', vehicleCommander)
    strs = strs.replaceAll('{{address1}}', address1)
    strs = strs.replaceAll('{{address2}}', address2)
    strs = strs.replaceAll('{{weight}}', weight)
    strs = strs.replaceAll('{{hour}}', hour)
    strs = strs.replaceAll('{{price}}', price)
    strs = strs.replaceAll('{{price1}}', price1)
    strs = strs.replaceAll('{{price2}}', price2)
    strs = strs.replaceAll('{{price3}}', price3)
    strs = strs.replaceAll('{{hour1}}', year+'年'+mouth+'月'+ day+'日'+ hour1)
    strs = strs.replaceAll('{{year}}', year)
    strs = strs.replaceAll('{{mouth}}', mouth)
    strs = strs.replaceAll('{{day}}', day)
    strs = strs.replaceAll('{{textarea}}', textarea)
    strs = strs.replaceAll('{{img}}', `<img src="${imageUrl.value}" alt="logo" style="position:absolute;bottom:80px;left:120px; width: 100px;height: 101px;"></img>`)
    const div: any = document.getElementById('imageWrapper')
    let divnew = document.createElement('div')
    divnew.innerHTML = strs
    divnew.setAttribute('id', 'pdf')
    divnew.setAttribute('style', 'position: relative;')
    // 设置canvas的宽高与图片相同
    divnew.style.width = '100%'
    divnew.style.height = '100%'
    divnew.style.position = 'relative'
    divnew.style.background = '#fff'
    div.appendChild(divnew)
    textArr.value.push(strs)
    //  const staffsDiv = document.getElementById('staffs')
    // staffsDiv.addEventListener('click', () => {
    //   dialogVisible.value = true
    // })
     })
}
const userId = ref('')
const submit = ()=>{
  if(forms.value.staff === ''){
    ElMessage.error('请选择司机')
    return
  }else{
    dialogVisible.value = false
    const staff = staffList.value.filter((item: any) => item.id === forms.value.staff)[0]
userId.value = staff.userId
    const staffsDiv = document.getElementById('staffs')
    // 修改样式
    staffsDiv.innerHTML = staff.staff
    const postalAccountDiv = document.getElementById('postalAccount')
    postalAccountDiv.innerHTML = staff.postalAccount
    const accountNameDiv = document.getElementById('accountName')
    accountNameDiv.innerHTML = staff.accountName
    const carOwnerDiv = document.getElementById('carOwner')
    carOwnerDiv.innerHTML = staff.carOwner
    const addressDiv = document.getElementById('address')
    addressDiv.innerHTML = staff.address
    const phoneDiv = document.getElementById('phone')
    phoneDiv.innerHTML = staff.phone
    const idNumberDiv = document.getElementById('idNumber')
    idNumberDiv.innerHTML = staff.idNumber
    const vehicleNumberDiv = document.getElementById('vehicleNumber')
    vehicleNumberDiv.innerHTML = staff.vehicleNumber
    const vehicleCommanderDiv = document.getElementById('vehicleCommander') 
    vehicleCommanderDiv.innerHTML = staff.vehicleCommander
  }
}
const submits = () => {
  if(forms.value.staff === ''){
    ElMessage.error('请选择司机')
    return
  }else{
    const html = document.getElementById('pdf')
    const address1 = document.getElementById('address1').value
    const address2 = document.getElementById('address2').value
    const weight = document.getElementById('weight').value
    const hour = document.getElementById('hour').value
    const price =document.getElementById('price').value
    const price1 =`<span id="price1">${document.getElementById('price1').value}</span>`
    const price2 = `<span id="price2">${document.getElementById('price2').value}</span>`
    const price3 = `<span id="price3">${document.getElementById('price3').value}</span>`
    const year = document.getElementById('year').value
    const mouth = document.getElementById('mouth').value
    const day = document.getElementById('day').value
    const hour1 = document.getElementById('hour1').value
    const textarea = document.getElementById('textarea').value
    const address11 = `<input style="width: 100px;" id="address1" placeholder="请输入出发地">`
    const address22 = `<input style="width: 100px;" id="address2" placeholder="请输入到达地">`
    const weightt = `<input style="width: 100px;" id="weight" placeholder="请输入重量">`
    const hourh = `<input style="width: 100px;" id="hour" placeholder="请输入">`
    const pricep = `<input style="width: 100px;" id="price" placeholder="请输入">`
    const price11 = `<input style="width: 100px;" id="price1" placeholder="请输入">`

    const price22 = `<input style="width: 100px;" id="price2" placeholder="请输入">`
    const price33 = `<input style="width: 100px;" id="price3" placeholder="请输入">`
    const year1 = `<input style="width: 50px;" id="year" placeholder="请输入">`
    const mouth1 = `<input style="width: 50px;" id="mouth" placeholder="请输入">`
    const day1 = `<input style="width: 50px;" id="day" placeholder="请输入">`
    const hour11 = `<input style="width: 50px;" id="hour1" placeholder="请输入">`

    const textareaa = `<input style="width: 100px;" id="textarea" placeholder="请输入备注">`
    const strs = html.innerHTML.replaceAll(address11,address1)
    const strs1 = strs.replaceAll(address22,address2)
    const strs2 = strs1.replaceAll(weightt,weight)
    const strs3 = strs2.replaceAll(hourh,hour)
    const strs4 = strs3.replaceAll(pricep,price)
    const strs5 = strs4.replaceAll(price11,price1)
    const strs6 = strs5.replaceAll(price22,price2)
    const strs7 = strs6.replaceAll(price33,price3)
    const strs8 = strs7.replaceAll(hour11,hour1)

    const strs9 = strs8.replaceAll(textareaa,textarea)
    const strs10 = strs9.replaceAll(year1,year)
    const strs11 = strs10.replaceAll(mouth1,mouth)
    const strs12 = strs11.replaceAll(day1,day)

    // 将strs9 中的p标签替换为div标签
    const strs13 = strs12.replaceAll('<p', '<div')
    const strs14 = strs13.replaceAll('</p>', '</div>')

    console.log(strs14,'000000')
    ElMessageBox.confirm('请确认您是否已填写完毕？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
     console.log('0',strs14)
    REQUEST.POST('CONTRACT', {
        list: [
          {
          contractUrl:`<div style="font-size:13px!important;color:#333333!important;">${strs14}</div>`,
          userId: userId.value,
          templateId: queryForm.value.templateId,
          houseId: store.state.userInfo.houseId,
          contractNo: hetongList.value[0]
          }
        ]
      }).then((res: any) => {
        if (res.status === 200) {
          ElMessage({
            type: 'success',
            message: '操作成功！'
          })
          cancel()
        } else {
          ElMessage({
            type: 'warning',
            message: res.message
          })
        }
      })
    })
  }
}
const yulan = () => {
  const html = document.getElementById('pdf')
  const address1 = document.getElementById('address1').value
  const address2 = document.getElementById('address2').value
  const weight = document.getElementById('weight').value
  const hour = document.getElementById('hour').value
  const price = document.getElementById('price').value
  const price1 = document.getElementById('price1').value
  const price2 = document.getElementById('price2').value
  const price3 = document.getElementById('price3').value
  const year = document.getElementById('year').value
  const mouth = document.getElementById('mouth').value
  const day = document.getElementById('day').value
  const hour1 = document.getElementById('hour1').value

  const textarea = document.getElementById('textarea').value
  const address11 = `<input style="width: 100px;" id="address1" placeholder="请输入出发地">`
  const address22 = `<input style="width: 100px;" id="address2" placeholder="请输入到达地">`
  const weightt = `<input style="width: 100px;" id="weight" placeholder="请输入重量">`      
  const hourh = `<input style="width: 100px;" id="hour" placeholder="请输入">`
  const pricep = `<input style="width: 100px;" id="price" placeholder="请输入">`
  const price11 = `<input style="width: 100px;" id="price1" placeholder="请输入">`
  const price22 = `<input style="width: 100px;" id="price2" placeholder="请输入">`
  const price33 = `<input style="width: 100px;" id="price3" placeholder="请输入">`
  const year11 = `<input style="width: 50px;" id="year" placeholder="请输入">`
  const mouth11 = `<input style="width: 50px;" id="mouth" placeholder="请输入">`
  const day11 = `<input style="width: 50px;" id="day" placeholder="请输入">`
  const hour11 = `<input style="width: 50px;" id="hour1" placeholder="请输入">`

  const textareaa = `<input style="width: 100px;" id="textarea" placeholder="请输入备注">`
  const strs = html.innerHTML.replaceAll(address11,address1)
   const strs1 = strs.replaceAll(address22,address2)
    const strs2 = strs1.replaceAll(weightt,weight)
    const strs3 = strs2.replaceAll(hourh,hour)
    const strs4 = strs3.replaceAll(pricep,price)
    const strs5 = strs4.replaceAll(price11,price1)
    const strs6 = strs5.replaceAll(price22,price2)
    const strs7 = strs6.replaceAll(price33,price3)
    const strs8 = strs7.replaceAll(hour11,hour1)
    const strs9 = strs8.replaceAll(textareaa,textarea)  
    const strs10  = strs9.replaceAll(year11,year)
    const strs11  = strs10.replaceAll(mouth11,mouth)
    const strs12  = strs11.replaceAll(day11,day)

     // 将strs9 中的p标签替换为div标签
    const strs13 = strs12.replaceAll('<p', '<div')
    const strs14 = strs13.replaceAll('</p>', '</div>')
    console.log(strs14,'000000')
    REQUEST.POST('PREVIEW', {
      html:`<div style="font-size:13px!important;color:#333333!important;">${strs14}</div>`
    }).then((res: any) => {
      console.log(res.data)
      htmlUrl.value = res.data
      dialogVisibles.value = true
    })
}
const cancel = () => {
  window.location.reload();
}
</script>
<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
<style>
input {
  outline: none !important;
  border: 0 !important;
  border-bottom: 0px solid #000 !important;
  margin-top: -5px;
  background: #E8F0FE;
}
</style>
